<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const id = ref(0); // 使用 marker点击事件 需要填写id
const title = ref("map");
const latitude = ref(39.909);
const longitude = ref(116.39742);
const covers = ref([
  {
    id: 0, // 确保 id 是数字
    latitude: 39.909,
    longitude: 116.39742,
    //iconPath: "/static/default-marker.png", // 使用默认 marker 图标
    width: 30, // 添加宽度
    height: 30, // 添加高度
  },
  {
    id: 1, // 确保 id 是数字
    latitude: 39.9,
    longitude: 116.39,
    //iconPath: "/static/default-marker.png", // 使用默认 marker 图标
    width: 30, // 添加宽度
    height: 30, // 添加高度
  },
]);

const props = defineProps({
  name: {
    type: String, // 定义类型为字符串
    required: true,
  },
});
</script>

<template>
  <view class="house-map">
    <view class="total">{{ name }}</view>
    <!-- 正确绑定 name 变量 -->
    <view class="page-body">
      <view class="page-section page-section-gap">
        <map
          :latitude="latitude"
          :longitude="longitude"
          :markers="covers"
        ></map>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.house-map {
  display: flex;
  flex-direction: column;
  height: 500rpx;
  width: 100%;
  margin-top: 20rpx;
  background-color: white;
  border-bottom: 4rpx solid #e6ebed;
  .total {
    display: flex;
    align-items: flex-start;
    font-size: 36rpx;
    width: 100%;
    height: 100rpx;
    margin-left: 18rpx;
    padding-top: 30rpx;
  }

  .page-body {
    display: flex;
    flex-direction: column;
    width: 60%;
    height: 300rpx;
    margin: 0 auto;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    map {
      display: flex;
      justify-content: center;
      margin-top: 30rpx;
    }
  }
}
</style>
